<template>
  <div class="currentMusic" v-if="musicDetail.name">
    <div class="left">
      <img :src="picUrl" :class="!paused ? 'run' : ''" alt />
      <audio :src="url" ref="audios"></audio>
      <div class="left-name">{{ musicDetail.name }}</div>
    </div>
    <div class="reight">
      <!-- 音频 -->
      <i class="iconfont icon-bofang" @click="play" v-if="paused"></i>
      <i class="iconfont icon-zantingtingzhi" @click="play" v-else></i>
      <i class="iconfont icon-liebiao" @click="showPop"></i>
    </div>
  </div>
</template>

<script>
export default {
  // 获取数据=》 store
  data() {
    return {
      musicDetail: {},
      picUrl: "",
      url: "",
      paused: false,
    };
  },
  mounted() {
    this.getMusicData();
  },
  computed: {
    audios() {
      return this.$store.state.audios;
    },
  },
  methods: {
    //获取到音乐详情
    getMusicData() {
      this.musicDetail = this.$store.state.MusicDetail;
      this.url = this.$store.state.musicUrl;
      this.picUrl = this.$store.state.bgUrl;
    },
    play() {
      this.audios[this.paused ? "play" : "pause"]();
      this.paused = !this.paused;
    },
    //子组件向父组件传递数据=》
    showPop() {
      this.$emit("showPops");
    },
  },
};
</script>

<style scoped lang="less">
.currentMusic {
  position: fixed;
  height: 200px;
  width: 100%;
  background: #fff;

  display: flex;
  left: 0;
  bottom: 220px;

  justify-content: space-between;
  padding: 0 30px;
  .left {
    display: flex;
    justify-items: center;
    img {
      height: 100%;
      width: 200px;
      border-radius: 50%;
      margin-right: 40px;
    }
    .run {
      animation: round_animate 5s linear infinite;
    }
    @keyframes round_animate {
      to {
        transform: rotate(1turn);
      }
    }
    .left-name {
      height: 200px;
      line-height: 200px;
    }
  }
  .reight {
    display: flex;
    align-items: center;
    i {
      color: blue;
      font-size: 130px;
      margin: 0 50px;
    }
  }
}
</style>